/**
 * 文本转语音 - 使用示例
 */

import { speakText, pauseSpeech, resumeSpeech, stopSpeech, isSpeaking, getVoices } from './text-to-speech'

// ==================== 基础用法 ====================

// 1. 最简单的使用方式
function example1() {
  speakText('你好，这是一个语音播放示例')
}

// 2. 使用 async/await
async function example2() {
  try {
    await speakText('这段文字播放完成后会继续执行')
    console.log('播放完成')
  } catch (error) {
    console.error('播放失败', error)
  }
}

// 3. 使用 Promise
function example3() {
  speakText('使用Promise方式')
    .then(() => {
      console.log('播放完成')
    })
    .catch((error) => {
      console.error('播放失败', error)
    })
}

// ==================== 高级配置 ====================

// 4. 自定义语速、音调、音量
function example4() {
  speakText('这是一段快速、高音调、大音量的语音', {
    rate: 1.5, // 语速 (0.1-10，1为正常)
    pitch: 1.5, // 音调 (0-2，1为正常)
    volume: 1 // 音量 (0-1，1为最大)
  })
}

// 5. 使用英文语音
function example5() {
  speakText('Hello, this is an English text to speech example', {
    lang: 'en-US', // 英文
    rate: 0.9
  })
}

// 6. 使用回调函数
function example6() {
  speakText('使用回调函数监听播放状态', {
    onStart: () => {
      console.log('开始播放')
    },
    onEnd: () => {
      console.log('播放结束')
    },
    onError: (error) => {
      console.error('播放出错', error)
    }
  })
}

// ==================== 播放控制 ====================

// 7. 暂停和继续播放
function example7() {
  // 开始播放
  speakText('这是一段可以暂停和继续的语音播放示例，内容比较长，用于测试暂停和继续功能')

  // 2秒后暂停
  setTimeout(() => {
    pauseSpeech()
    console.log('已暂停')
  }, 2000)

  // 4秒后继续
  setTimeout(() => {
    resumeSpeech()
    console.log('继续播放')
  }, 4000)
}

// 8. 停止播放
function example8() {
  speakText('这是一段会被中途停止的语音')

  // 1秒后停止
  setTimeout(() => {
    stopSpeech()
    console.log('已停止')
  }, 1000)
}

// 9. 检查播放状态
function example9() {
  if (isSpeaking()) {
    console.log('正在播放中')
    stopSpeech()
  } else {
    console.log('没有正在播放的内容')
    speakText('开始新的播放')
  }
}

// ==================== 获取可用语音 ====================

// 10. 获取所有可用的语音列表
function example10() {
  // 注意：某些浏览器需要在页面加载完成后才能获取语音列表
  window.addEventListener('load', () => {
    const voices = getVoices()
    console.log('可用的语音列表：', voices)

    // 输出中文语音
    const chineseVoices = voices.filter(voice => voice.lang.includes('zh'))
    console.log('中文语音：', chineseVoices)
  })
}

// 11. 指定特定的语音
function example11() {
  const voices = getVoices()
  const chineseVoice = voices.find(voice => voice.lang === 'zh-CN')

  if (chineseVoice) {
    speakText('使用指定的中文语音', {
      voice: chineseVoice.name
    })
  }
}

// ==================== 在Vue组件中使用 ====================

// 12. Vue组件示例
const VueComponentExample = {
  data() {
    return {
      text: '请输入要播放的文本',
      isSpeaking: false,
      rate: 1,
      pitch: 1,
      volume: 1
    }
  },
  methods: {
    // 播放
    handleSpeak() {
      speakText(this.text, {
        rate: this.rate,
        pitch: this.pitch,
        volume: this.volume,
        onStart: () => {
          this.isSpeaking = true
          this.$message.success('开始播放')
        },
        onEnd: () => {
          this.isSpeaking = false
          this.$message.info('播放完成')
        },
        onError: (error) => {
          this.isSpeaking = false
          this.$message.error('播放失败：' + error.message)
        }
      })
    },
    // 暂停
    handlePause() {
      if (pauseSpeech()) {
        this.$message.info('已暂停')
      }
    },
    // 继续
    handleResume() {
      if (resumeSpeech()) {
        this.$message.info('继续播放')
      }
    },
    // 停止
    handleStop() {
      if (stopSpeech()) {
        this.isSpeaking = false
        this.$message.info('已停止')
      }
    }
  }
}

// ==================== 实用场景 ====================

// 13. 朗读表格数据
function example13(tableData) {
  const text = tableData.map((row, index) => {
    return `第${index + 1}行：${Object.values(row).join('，')}`
  }).join('。')

  speakText(text)
}

// 14. 朗读通知消息
function speakNotification(message) {
  speakText(`您有新的消息：${message}`, {
    rate: 1.2,
    onStart: () => {
      console.log('播报通知')
    }
  })
}

// 15. 表单验证错误提示
function speakFormError(errors) {
  const errorText = errors.map(err => err.message).join('，')
  speakText(`表单验证失败：${errorText}`, {
    rate: 0.9
  })
}

export {
  example1,
  example2,
  example3,
  example4,
  example5,
  example6,
  example7,
  example8,
  example9,
  example10,
  example11,
  VueComponentExample,
  example13,
  speakNotification,
  speakFormError
}

